Security News
JSR Working Group Kicks Off with Ambitious Roadmap and Plans for Open Governance
At its inaugural meeting, the JSR Working Group outlined plans for an open governance model and a roadmap to enhance JavaScript package management.
mjml-head-attributes
Advanced tools
The mjml-head-attributes npm package is a part of the MJML framework, which is used to create responsive email templates. The mjml-head-attributes component allows you to define default attributes for MJML components within the <mj-head> section, making it easier to apply consistent styling across multiple components.
Setting default attributes for MJML components
This feature allows you to set default attributes for MJML components like <mj-text> and <mj-button>. The provided code sample sets a default font size and color for <mj-text> components and a default background color for <mj-button> components.
<mjml>
<mj-head>
<mj-attributes>
<mj-text font-size="20px" color="#000000" />
<mj-button background-color="#ff0000" />
</mj-attributes>
</mj-head>
<mj-body>
<mj-section>
<mj-column>
<mj-text>This text will have a font size of 20px and color #000000.</mj-text>
<mj-button>This button will have a background color of #ff0000.</mj-button>
</mj-column>
</mj-section>
</mj-body>
</mjml>
Overriding default attributes
This feature allows you to override the default attributes set in the <mj-attributes> tag. The provided code sample shows how a specific <mj-text> component can have its own font size and color, different from the default values.
<mjml>
<mj-head>
<mj-attributes>
<mj-text font-size="20px" color="#000000" />
</mj-attributes>
</mj-head>
<mj-body>
<mj-section>
<mj-column>
<mj-text>This text will have a font size of 20px and color #000000.</mj-text>
<mj-text font-size="25px" color="#ff0000">This text will override the default attributes and have a font size of 25px and color #ff0000.</mj-text>
</mj-column>
</mj-section>
</mj-body>
</mjml>
The mjml package is the core library of the MJML framework. It allows you to write responsive email templates using a simple markup language. While mjml-head-attributes is a specific component for setting default attributes, the mjml package provides the overall structure and components needed to build the entire email template.
The mjml-head package is another component of the MJML framework. It is used to define the head section of an MJML document, where you can include elements like <mj-title>, <mj-preview>, and <mj-attributes>. The mjml-head-attributes component is specifically for setting default attributes within the <mj-head> section.
The mjml-core package is the underlying engine that powers the MJML framework. It is responsible for parsing MJML code and converting it into responsive HTML. While mjml-head-attributes focuses on setting default attributes, mjml-core handles the overall rendering process.
This tag allows you to modify default attributes on a mj-tag
and add mj-class
to them.
<mjml>
<mj-head>
<mj-attributes>
<mj-text padding="0" />
<mj-class name="blue" color="blue" />
<mj-class name="big" font-size="20px" />
<mj-all font-family="Arial" />
</mj-attributes>
</mj-head>
<mj-body>
<mj-container>
<mj-section>
<mj-column>
<mj-text mj-class="blue big">
Hello World!
</mj-text>
</mj-column>
</mj-section>
</mj-container>
</mj-body>
</mjml>
You can use mj-all to set default attributes for every components inside your MJML document
Note that the apply order of attributes is: inline attributes, then classes, then default mj-attributes and then defaultMJMLDefinition
FAQs
mjml-head-attributes
We found that mjml-head-attributes demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 6 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
At its inaugural meeting, the JSR Working Group outlined plans for an open governance model and a roadmap to enhance JavaScript package management.
Security News
Research
An advanced npm supply chain attack is leveraging Ethereum smart contracts for decentralized, persistent malware control, evading traditional defenses.
Security News
Research
Attackers are impersonating Sindre Sorhus on npm with a fake 'chalk-node' package containing a malicious backdoor to compromise developers' projects.